<template>
  <div class="result">
    <div class="header_body">
      <header-nav :leftArrow="true" titelText="案件审批"></header-nav>

      <div class="result-content">
        <div class="pdBox">
          <div class="pdBox-title">
            <span style="color: #ee0a24; margin-right: 2px">*</span>审批结果
          </div>
          <van-radio-group
            style="padding-left: 7px"
            v-model="resultForm.nodeStatus"
            direction="horizontal"
          >
            <van-radio :name="2" style="margin-right: 52px">同意</van-radio>
            <van-radio :name="3">不同意</van-radio>
          </van-radio-group>
        </div>
        <van-field
          v-if="chooseFlag == 1&&resultForm.nodeStatus == 2"
          v-model="resultForm.sponsor"
          readonly
          required
          label="主办人"
        />
        <van-field
          v-if="chooseFlag == 1&&resultForm.nodeStatus == 2"
          v-model="resultForm.organizer"
          is-link
          readonly
          required
          placeholder="请选择"
          label="协办人"
          @click="organizerSelect"
        />
        <div class="line10"></div>

        <div style="padding: 16px 16px 0 16px">
          <span
            v-if="resultForm.nodeStatus == 3"
            style="color: #ee0a24; margin-right: 2px"
            >*</span
          >
          审批意见
        </div>
        <van-field
          v-model="resultForm.approveOpinions"
          required
          type="textarea"
          rows="2"
          autosize
          maxlength="128"
          placeholder="请输入审批意见"
        />

        <div class="submitBtn2">
          <van-button block type="primary" class="btn-left" @click="submit()">
            提交
          </van-button>
        </div>

        <!-- 协办人 -->
        <van-popup v-model:show="organizerPicker" round position="bottom">
          <van-picker
            :columns="organizerData"
            @cancel="organizerPicker = false"
            @confirm="organizerConfirm"
          />
        </van-popup>
      </div>
    </div>
  </div>
</template>
<script setup>
import { showSuccessToast, showFailToast, showNotify } from 'vant'
const { useFiling, usePublic } = $globalStore
const router = useRouter()
const route = useRoute()
const id = ref(route.query.id)
const caseId = ref(route.query.caseId)
const sponsor = ref(route.query.sponsor)
const sponsorId = ref(route.query.sponsorId)
const chooseFlag = ref(route.query.chooseFlag)

const resultForm = reactive({
  id: id.value,
  caseId: caseId.value,
  nodeStatus: 2,
  approveOpinions: '',
  sponsor: sponsor.value,
  sponsorId: sponsorId.value,
  organizer: '',
  organizerId: '',
})

const submit = async () => {
  if (chooseFlag == 1 &&resultForm.nodeStatus == 2 && resultForm.organizer == '') {
    return showNotify({
      type: 'danger',
      message: '请选择协办人',
    })
  } else if (chooseFlag == 1 &&resultForm.nodeStatus == 3 && resultForm.approveOpinions == '') {
    return showNotify({
      type: 'danger',
      message: '请输入审批意见',
    })
  }
  if (resultForm.nodeStatus == 3) {
    resultForm.organizer = ''
    resultForm.organizerId = ''
    resultForm.sponsor = ''
    resultForm.sponsorId = ''
  }
  const res = await useFiling.approveTask(resultForm)
  if (res.code == 0) {
    showSuccessToast('审核成功')
    router.push({ name: 'filingList' })
  } else {
    showFailToast(res.message)
  }
}

//协办人选择
const organizerPicker = ref(false)
const organizerData = ref([])
//打开协办人选择
const organizerSelect = () => {
  getOrganizers()
  organizerPicker.value = true
}
//选择协办人
const organizerConfirm = (val) => {
  resultForm.organizerId = val.selectedOptions[0].value
  resultForm.organizer = val.selectedOptions[0].text
  organizerPicker.value = false
}
//获取协办人数据源
const getOrganizers = async () => {
  let deptId = JSON.parse(sessionStorage.getItem('userInfo')).deptId
  const res = await usePublic.getUserList(deptId, 1)
  if (res.code == 0) {
    organizerData.value = []
    res.data.forEach((element) => {
      let obj = {
        text: element.userName,
        value: element.id,
        disabled: false,
      }
      if (element.id == sponsorId.value) {
        obj.disabled = true
      }
      organizerData.value.push(obj)
    })
    console.log(organizerData.value)
  }
}

onMounted(async () => {})
</script>
<style lang="scss" scoped>
.result {
  width: 100%;
  height: 100%;
  overflow-y: hidden;

  .result-content {
    width: 100%;
    height: 100%;
    margin-top: 46px;

    .title {
      padding: 16px;
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0px;
      line-height: 24px;
      color: #2b2b2b;
      border-bottom: 1px solid #f0f0f0;
    }

    .wsBox {
      padding: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #f5f5f5;

      .text {
        display: flex;
        align-items: center;
        > img {
          width: 36px;
          height: 36px;
          margin-right: 12px;
        }
        > div {
          font-size: 15px;
          font-weight: 500;
          letter-spacing: 0px;
          line-height: 22px;
          color: #2b2b2b;
        }
      }
    }

    .pdBox {
      padding: 16px;
      border-bottom: 1px solid #f5f5f5;

      .pdBox-title {
        margin-bottom: 16px;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 24px;
        color: #4d4d4d;
      }
    }
  }
}

.line10 {
  width: 100%;
  height: 10px;
  background-color: #f7f7f7;
}

.result .van-field__control {
  padding: 0 !important;
}

.result .van-cell {
  padding: 16px !important;
}
</style>
